<template>
  <div>
    <a-card class="table-card">
      <a-affix offsetTop="0">
        <div style="display: flex; justify-content: space-between; line-height: 60px; background-color: white; ">
          <div style="font-weight: bold; margin-left: 30px;"> {{ '选择活动模板' }}  </div>
        </div>
        <a-divider style="margin: 0" />
      </a-affix>

      <GzSearchForm :searchFunc="searchFunc" :resetFunc="() => vdata.searchData = {}">
        <gz-text-up v-model:value="vdata.searchData['activityTemplateNo']" :placeholder="'活动模板编号'" />
        <gz-text-up v-model:value="vdata.searchData['templateName']" :placeholder="'活动模板名称'" />
      </GzSearchForm>
      <!-- 列表渲染 -->
      <GzTable
        ref="infoTableRef"
        :initData="true"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="vdata.searchData"
        row-key="activityTemplateNo"
        :rowSelection="rowSelection"
        :pageSize="5"
      >
        <template #topBtnSlot>
          <!-- <a-tag v-if="mchApplymentData.mchNo" closable color="green" @close="() => { mchApplymentData.mchNo = undefined}">已选择模板： {{ mchApplymentData.mchNo }} </a-tag> -->
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key == 'templateImg'">
            <a-image v-if="record.templateImg" :src="record.templateImg" />
            <img v-else src="@/assets/svg/default-img.svg">
          </template>
        </template>
      </GzTable>

      <a-affix :offset-bottom="20">
        <div style="background-color: white;">
          <a-divider style="margin: 0; margin-top: 20px;" />
          <div class="bottom-buttons">
            <div class="bottom-buttons-item" @click="emits('switchApplyPage', { page: 'list' })">
              <a-button type="link" style="color: #808080 ;"><left-outlined />返回列表页</a-button>
            </div>
            <div style="width: 1px; height: 100%; background-color: #f0f0f0;" />
            <div class="bottom-buttons-item" @click="toNextPage()">
              <a-button type="link">去创建活动<right-outlined /></a-button>
            </div>
          </div>
        </div>
      </a-affix>
    </a-card>
  </div>
</template>
<script setup lang="ts">  

import { ref, reactive, getCurrentInstance, defineEmits, defineExpose, inject } from 'vue'
import { $getActiveTemplateList,$activityTemplateEdit,$activityTemplateDelete } from '@/api/activityManage/activityTemplate/index'
import activityTemplateMap from './activityTemplateMap.js'

const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

// list页面的 切换页面的函数
const emits = defineEmits(['switchApplyPage'])

// 参数注入： 创建的活动模板数据（包含 模板编号 模板名称 ） 【  当修改操作时：  列表页面需要查询出进件信息，并provice该信息 】 
let activityTemplateDataRef :any = inject('activityTemplateData')
let activityTemplateData : any = activityTemplateDataRef.value

const infoTableRef = ref()

// 数据源
const vdata = reactive({
  searchData: {}, // 搜索条件
})


// 活动模板列表
const tableColumns = reactive([
  { key: 'activityTemplateNo', title: '活动模板编号',dataIndex: 'activityTemplateNo', fixed: 'left' },
  { key: 'templateName', title: '活动模板名称',dataIndex: 'templateName', },
  { key: 'templateImg', title: '活动模板图片',dataIndex: 'templateImg', },
  { key: 'activityTypeName', title: '活动类型',dataIndex: 'activityTypeName', },
  // { key: 'operation', title: '操作', dataIndex: 'operation',  fixed: 'right', align: 'center' }
])

// 列表请求函数
function reqTableDataFunc(params: any){
  return $getActiveTemplateList(params)
}

// 搜索函数
function searchFunc() {
  infoTableRef.value.refTable(true)
}

// 列表选择事件
const rowSelection =  {
    type: 'radio',
    onChange: (selectedRowKeys, selectedRows) => {
      activityTemplateData.activityTemplateNo = selectedRows[0].activityTemplateNo
    }
}

// 去创建活动的函数
function toNextPage() {
  // 判断模板是否选择
  if (!activityTemplateData.activityTemplateNo) {
    $infoBox.message.error('请选择活动模板')
    return
  }
  // 校验模板是否存在
  let flag = false
  Object.keys(activityTemplateMap).forEach(key => {
    if(activityTemplateData.activityTemplateNo === key){
      flag = true
    }
  })
  if(!flag){
    $infoBox.message.error('活动模板不存在，请选择正确的模板') 
    return
  }
  emits('switchApplyPage',{ page: 'activityCreateEntry', params: { isAdd: true } })
}


// 页面渲染函数
function pageRender(params: any) { 
  // 数据重置 模板数据重置  
  if (params.activityTemplateCode) {
    activityTemplateData.activityTemplateNo = params.activityTemplateCode
    emits('switchApplyPage',{ page: 'activityCreateEntry', params: { isAdd: true } })
  }else{
    activityTemplateData.activityTemplateNo = ''
  }
}

defineExpose({ pageRender })


</script>

<style lang="less" scoped>

.ant-list-item.selected-item-border{
  
 position: relative;

 &::before{
   content: '';
   position:absolute;
   width: calc(100% + 6px);
   height:calc(100% + 6px);
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   border: 5px solid;
   border-radius: 16px;
   box-sizing: content-box;
   border-color: @primary-color;

 }

 .select-div{
   position: absolute;
    bottom: -4px;
    right: -4px;
    width: 36px;
    height: 36px;
    z-index: 9;
    border-radius: 5px 0 13px 0;
    background: @primary-color;
    display: flex;
    flex-direction:column;
    justify-content: center;
    color: white;
    font-size: 18px;
 }

}

.bottom-buttons{
  display: flex; flex-direction: row; justify-content: center; height: 60px;

  .bottom-buttons-item{
    flex-grow: 1; display: flex; flex-direction: column; justify-content: center;
  }

   .bottom-buttons-item:hover{
    transition: 0.3s ease;
    background-color: rgba(23, 91, 230, 0.05);
    cursor: pointer;
  }

}

</style>